<template>
	<div class="viewer-container">
		<PointCloudViewer
			ref="viewer"
			:url="pointCloudUrl"
			:show-controls="true"
			:min-point-size="0.1"
			:max-point-size="3.0"
			:default-render-mode="'height'"
			:color-map="'rainbow'"
			:camera-config="cameraConfig"
			:background-color="'#000000'"
			@load-success="handleLoadSuccess"
			@load-error="handleLoadError"
		/>
	</div>
</template>

<script lang="ts" setup>
	import PointCloudViewer from "@/components/example.vue"; //你的组件路径
	import { ref } from "vue";

	const viewer = ref<InstanceType<typeof PointCloudViewer> | null>(null);
	// 本地文件
	const pointCloudUrl = new URL("./static/08.pcd", import.meta.url).href;
	//后端url
	// const pointCloudUrl =
	//   'xxxxxxx'

	const cameraConfig = {
		fov: 30,
		near: 0.1,
		far: 1000,
		minDistance: 0.1,
		maxDistance: 300,
	};

	const handleLoadSuccess = () => {
		console.log("Point cloud loaded successfully");
	};

	const handleLoadError = (error: Error) => {
		console.error("Failed to load point cloud:", error);
	};
</script>

<style>
	.viewer-container {
		width: 100%;
		height: calc(100vh - 105px);
	}
</style>
